@import "mobile-commom.scss";
*{
    margin: 0;
    border: 0;
    // 头部
    header{
    display: flex;
    position: fixed;
    padding-bottom: vw(37);
    background-color: white;
      @include box-page1(750,433);
    //   顶部导航
      .topnav{
          display: flex;
          flex-direction: row;
         justify-content: space-between;
         align-items: center;
         position: absolute;
         left: vw(23);
         top: vw(48);
        @include box-page1(704,57);
            //  返回按钮
            .back_btn{
                border-radius: vw(15);
            @include box-page1(123,57);
            button{
                outline-style: none;
                font-size: vw(26);
                border-radius: vw(15);
                @include box-page1(123,57);
                border: solid vw(2) #ff9344;
            }
            }
            // 分类
            .clsasify_title{
                @include box-page1(52,27); 
                span{
                    font-size: vw(26);
                    color: #000000;
                }
            }
            // 切换城市
            .select_city{
                @include box-page1(159,56);
                select{
                    font-size: vw(26);
                    outline-style: none;
                    border: solid vw(2) #ff9344;
                    @include box-page1(159,56);
                 
                }
            }
      }
    //   搜索框
      .search_bar{
          position: absolute;
          top: vw(141);
          left: vw(220);
        border-radius: vw(51) vw(51) vw(51) vw(51);
        @include box-page1(256,51);
        border: solid vw(2) #ff9344;
           // 输入框
           .search_btn{
            font-size: vw(24);
            padding: 0;
            margin-left: vw(29);
            outline-style: none;
            @include box-page1(168,51);
            ::-webkit-input-placeholder { 
                color: #777777;
              } 
        }
        &::after{
            content: "";
            position: absolute;
            left: vw(213);
            top: vw(8);
            // right: vw(16);
            @include box-page1(37,34);
            background-image: url(../img/page1/搜索矩.png);
            background-size: cover;
            background-repeat: no-repeat;
        }
      }
//    搜索推荐
       .search_recommend_title{
        position: absolute;
        top: vw(225);
        left: vw(303);
        @include box-page1(130,26);
        font-size: vw(26);
      }
    //   搜索推荐
      .search_recommend_container{
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between;
          text-align: center;
        position: absolute;
        top: vw(265);
        left: vw(113);
        @include box-page1(512,131);
        a{ 
            background-color:#dcdcdc;
            display: flex;
            text-decoration: none;
            align-items: center;
           justify-content: center;
            color: #898989;	
            font-size: vw(20);
            @include box-page1(125,64);
        }
        a:hover{
            background-color: orange;
        }
      }
   }
   main{
       margin-top: vw(433);
       margin-bottom: vw(121);
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       @include box-page1(750,1400);
       height: auto;
    
    // 热门搜索
    .pop_search_column{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: vw(47);
        @include box-page1(709,430);
        // 热门搜索标题
        .pop_search_title{
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            align-items: center;
            @include box-page1(709,47);   
            // 标题左边
            .column_title_left  {
                padding-left: vw(16);
                display: flex;
                justify-content: space-between;
                align-items: center;
                @include box-page1(175,47);
                img{
                    @include box-page1(32,47); 
                }
                p{
                    font-size: vw(30);
                    @include box-page1(123,30); 
                }
            } 
            // 标题-右边
            .column_title_right{
                @include box-page1(80,24); 
                a{
                    color: #000000;
                    display: flex;
                    text-decoration: none;
                    p{ 
                        font-size: vw(24);
                    }
                    i{
                        color: orange;
                        padding-left: vw(6);
                        font-size: vw(26);
                    }
                }  
            }    
        }
        // 热门搜索图片链接容器
        .pop_piccontainer{
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         @include box-page1(709,352); 
         .pic_left{
            @include box-page1(280,352);
            img{
                @include box-page1(280,352); 
            }   
         }
         .pic_right{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
           
            @include box-page1(420,352); 
            .pic_top{
                background-color: antiquewhite;
                @include box-page1(420,147); 
                img{
                    @include box-page1(420,147);   
                }
            } 
            .pic_bottom{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
             
                @include box-page1(420,197); 
                .pic_bottom_left {
                  
                    @include box-page1(195,197); 
                    img{
                        @include box-page1(195,197); 
                    }
                }
                .pic_bottom_right{
                 
                @include box-page1(211,197); 
                img{
                    @include box-page1(211,197); 
                }
            }
         }
        }
       }
     }
    //  推荐搜索
     .rec_search_bar{
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
         justify-content: space-between;
        @include box-page1(709,301); 
          // 推荐搜索标题
          .rec_search_title{
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
            @include box-page1(709,40);  
            // 推荐搜索标题-左边
            .title_left{
                display: flex;
                justify-content: space-between;
                align-items: center;
                @include box-page1(178,40); 
                img{
                    @include box-page1(41,40);   
                }
                p{
                    font-size: vw(30);
                    @include box-page1(120,30);   
                }
            }
              // 标题-右边
              .title_right{
                @include box-page1(80,24); 
                a{
                    display: flex;
                    color: #000000;
                    text-decoration: none;
                    p{ 
                        font-size: vw(24);
                    }
                    i{
                        color: orange;
                        padding-left: vw(6);
                        font-size: vw(26);
                    }
                }  
            }    
          }
          // 热门搜索图片链接容器
         .rec_container{
            @include box-page1(228,200); 
            img{
                @include box-page1(228,200);   
            }
         } 
     }
     //  推荐搜索
    .rec_food_bar{
        @extend.rec_search_bar;
    }
   }
}